<script setup lang="ts">
import { ref } from "vue";
type Data = { name: string; age: number; img: string; desc: string };
const resp = await fetch("/data.json");
const data = ref<Data>();
setTimeout(async () => {
  data.value = await resp.json();
}, 1000);
</script>

<template>
  <div class="flex flex-col">
    <div class="flex justify-start items-center space-x-4">
      <div class="rounded-full overflow-hidden border">
        <img :src="data?.img" class="w-16 object-cover" />
      </div>
      <div>
        <div>{{ data?.name }}</div>
        <div>{{ data?.age }}</div>
      </div>
    </div>

    <div class="my-3 border-t py-3">{{ data?.desc }}</div>
  </div>
</template>

<style scoped></style>
